<script setup>
import { defineProps } from "vue";
import useNightModeStore from "@/stores/nightModeStore";
const nightModeStore=useNightModeStore();
const props = defineProps({
    storyList: Array//接受pros属性的它是一个数组类型
});
//console.log("props===>",props);
</script>
<template>
    <ul :class="['list',nightModeStore.isNight?'night':'']">
        <li v-for="item in props.storyList" :key="item.id">
            <template v-if="item.showtime">
                <div class="timeline">
                    <span :class="['span',nightModeStore.isNight?'night':'']">{{ item.timeline }}</span>
                </div>
            </template>
            <template v-else>
                <RouterLink class="left" :to="`/detail/${item.id}`">
                <!-- <div class="left"> -->
                <h5>{{ item.title }}</h5>
                <span>{{ item.hint }}</span>
            </RouterLink>
            <!-- </div> -->
            <RouterLink :to="`/detail/${item.id}`">
            <img :src="item.images[0]" />
        </RouterLink>
        </template>
        </li>
    </ul>
</template>
<style scoped>
.timeline{
    color:#acabab;
    position: relative;
    width: 100%;
}
.timeline::before{
    content: "";
    position: absolute;
    width: 100%;
    height: 1px;
    border-top:1px solid #aaa
}
.timeline>span{
    position: absolute;
    left: 50%;
    top: -10px;
    padding: 0px 5px;
    background-color: #fff;
    transform: translatex(-50%);
}
.list.night{
    background-color: #555;
    color:#fff;
}
.list>li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 20px;
}
.list.night .left{
    color: #fff;
}
.list .left{
    color: #000;
}
.span.night{
    background-color: #555;
    color:#fff;
}

.list .left h5 {
    font-weight: normal;
    color: black;
    font-family: "微软雅黑";
    font-size: 16px;
}

.list .left span {
    display: inline-block;
    padding-top: 10px;
    font-size: 15px;
    color: #acabab;
}

.list img {
    width: 60px;
    height: 60px;
    border-radius: 4px;
}
</style>